@import '@influxdata/clockface/dist/variables.scss';

.flow-visualization {
  background-color: $cf-grey-5;
  border-radius: $cf-radius;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  padding: $cf-space-2xs + $cf-space-3xs;
}

.flow-visualization--header {
  display: flex;
}

.flow-visualization--view-error,
.flow-visualization--view {
  flex-grow: 1;
  width: 100%;
  border-radius: $cf-radius-sm;
  background-color: $cf-grey-5;

  .empty-graph-error {
    height: 200px;
  }

  .qr-code {
    width: 60%;
  }
}
.flow-visualization--view-error {
  background-color: $c-fire;
}

.flow-sidebar--submenu .view-options {
  padding: 0;
  padding-right: 15px;
}

.flow-visualization--export-warning {
  margin: $cf-space-2xs 0;

  > .cf-panel--body {
    padding: $cf-space-2xs $cf-space-s;
  }
}
